<template>
  <div class="login-test-container">
    <h2>登录功能测试</h2>
    
    <div class="form-group">
      <label>用户名：</label>
      <input v-model="username" type="text" placeholder="请输入用户名" />
    </div>
    
    <div class="form-group">
      <label>密码：</label>
      <input v-model="password" type="password" placeholder="请输入密码" />
    </div>
    
    <button @click="testLogin">测试登录</button>
    
    <div class="result-section">
      <h3>请求结果：</h3>
      <pre>{{ result }}</pre>
    </div>
    
    <div class="debug-info">
      <h4>调试信息：</h4>
      <p><strong>后端URL：</strong> http://localhost:3000/api/user/login</p>
      <p><strong>用户名：</strong> {{ username }}</p>
      <p><strong>密码：</strong> {{ password ? '已输入' : '未输入' }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
  name: 'LoginTest',
  data() {
    return {
      username: '23002944',
      password: '123456',
      result: '点击按钮开始测试'
    }
  },
  methods: {
    async testLogin() {
      try {
        this.result = '正在发送登录请求...'
        
        console.log('开始测试登录API')
        console.log('请求URL:', 'http://localhost:3000/api/user/login')
        console.log('请求数据:', {
          username: this.username,
          pwd: this.password
        })
        
        // 直接使用axios调用登录API
        const response = await axios.post('http://localhost:3000/api/user/login', {
          username: this.username,
          pwd: this.password
        })
        
        console.log('登录API响应:', response)
        
        // 格式化响应结果以便显示
        this.result = JSON.stringify({
          status: 'success',
          statusCode: response.status,
          data: response.data,
          headers: response.headers,
          responseTime: new Date().toISOString()
        }, null, 2)
        
        // 显示成功消息
        ElMessage.success('登录测试成功！')
        
      } catch (error) {
        console.error('登录测试失败:', error)
        
        // 格式化错误信息以便显示
        this.result = JSON.stringify({
          status: 'error',
          message: error.message || '未知错误',
          errorType: error.name || 'Error',
          response: error.response ? {
            status: error.response.status,
            data: error.response.data
          } : null,
          stack: error.stack ? error.stack.substring(0, 500) : null
        }, null, 2)
        
        // 显示错误消息
        ElMessage.error('登录测试失败，请查看详细信息')
      }
    }
  }
}
</script>

<style scoped>
.login-test-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

h2 {
  text-align: center;
  color: #303133;
  margin-bottom: 30px;
}

h3 {
  color: #303133;
  margin-top: 20px;
  margin-bottom: 10px;
}

h4 {
  color: #606266;
  margin-top: 20px;
  margin-bottom: 10px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #606266;
  font-weight: 500;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

input:focus {
  outline: none;
  border-color: #409eff;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #66b1ff;
}

.result-section {
  margin-top: 30px;
  padding: 15px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-height: 400px;
  overflow-y: auto;
}

.debug-info {
  margin-top: 20px;
  padding: 15px;
  background-color: #f0f9ff;
  border: 1px solid #bae7ff;
  border-radius: 4px;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #303133;
}

p {
  margin: 5px 0;
  color: #606266;
}
</style>